<!-- 搜索-操作 -->
<template>
  <div class="swiperSetContainer">
    <a-collapse :default-active-key="[1, 2, 3, 4, 5, 6, 7]" :bordered="false">
      <a-collapse-item header="内容设置" :key="1">
        <div class="chooseBox" style="margin-bottom: 10px">
          <p class="title">点击链接</p>
          <div class="radioBox" style="padding: 0px">
            <a-input type="text" v-model="currentTemp.link" placeholder="请输入链接地址" />
          </div>
        </div>
        <div class="imageBox">
          <div class="imageBox_item" v-for="(item, index) in currentTemp.imageList" :key="index">
            <a-upload
              action="/app/file/upload"
              :show-file-list="false"
              @success="onSuccessBcg($event, item)"
              @error="error($event, item)"
              :image-preview="true"
            >
              <template #upload-button>
                <div class="arco-upload-list-picture custom-upload-avatar" v-if="item.imageUrl">
                  <img style="display: block; width: 80px; height: 80px" :src="item.imageUrl" />
                  <div class="arco-upload-list-picture-mask">
                    <IconEdit />
                  </div>
                </div>
                <div class="arco-upload-picture-card" v-else>
                  <div class="arco-upload-picture-card-text">
                    <IconPlus />
                  </div>
                </div>
                <!-- </div> -->
              </template>
            </a-upload>
            <div class="rightBox">
              <div class="whiteBg">
                <a-input
                  :style="{ width: '60%' }"
                  type="text"
                  v-model="item.text"
                  placeholder="请输入内容"
                />
              </div>
              <p class="texts">建议图片尺寸为35×35，比例为1:1</p>
            </div>
          </div>
          <div class="addImageBox" @click="addImageBoxs"> 添加数据 </div>
        </div>
      </a-collapse-item>
      <a-collapse-item header="间距(px)" :key="2">
        <div class="sliderBox">
          <p>上边距</p>
          <a-slider
            v-model="currentTemp.paddingTop"
            show-input
            style="width: 100%"
            :min="0"
            :max="100"
          />
        </div>
        <div class="sliderBox">
          <p>下边距</p>
          <a-slider
            v-model="currentTemp.paddingBottom"
            show-input
            style="width: 100%"
            :min="0"
            :max="100"
          />
        </div>
        <div class="sliderBox">
          <p>左右边距</p>
          <a-slider
            v-model="currentTemp.paddingTwice"
            show-input
            style="width: 100%"
            :min="0"
            :max="100"
          />
        </div>
      </a-collapse-item>
      <a-collapse-item header="圆角设置(px)" :key="3">
        <div class="sliderBox">
          <p>上圆角</p>
          <a-slider
            v-model="currentTemp.radiusNumTop"
            show-input
            style="width: 100%"
            :min="0"
            :max="100"
          />
        </div>
        <div class="sliderBox">
          <p>下圆角</p>
          <a-slider
            v-model="currentTemp.radiusNumBottom"
            show-input
            style="width: 100%"
            :min="0"
            :max="100"
          />
        </div>
      </a-collapse-item>
    </a-collapse>
    <a-modal
      v-model:visible="tagvisible"
      @before-close="handleCancelTag"
      title="选择链接"
      width="600px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form ref="userFormTag" :auto-label-width="true" :model="subForm">
        <a-form-item field="type" label="链接类型">
          <a-select v-model="subForm.type" placeholder="请选择链接类型" allow-clear>
            <a-option v-for="(item, index) in typeLists" :key="index" :value="item.id">{{
              item.name
            }}</a-option>
          </a-select>
        </a-form-item>
        <a-form-item
          v-if="subForm.type == 1"
          label="跳转链接"
          field="links"
          :rules="[
            { required: true, message: '跳转链接不能为空' },
            { minLength: 1, maxLength: 100, message: '跳转链接必须小于100个字符' },
          ]"
          :validate-trigger="['change', 'input']"
        >
          <a-input v-model.trim="subForm.links" placeholder="请输入跳转链接" allow-clear />
        </a-form-item>
        <a-form-item
          v-if="subForm.type == 2"
          field="links"
          :rules="[
            { required: true, message: '跳转链接不能为空' },
            { minLength: 1, maxLength: 100, message: '跳转链接必须小于100个字符' },
          ]"
          label="系统功能"
        >
          <a-select v-model="subForm.links" placeholder="请选择系统功能" allow-clear>
            <a-option v-for="(item, index) in props.menus" :key="index" :value="item.path">{{
              item.name
            }}</a-option>
          </a-select>
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="handleCancelTag">取消</a-button>
          <a-button type="primary" @click="handleBeforeOkLink">确定</a-button>
        </a-space>
      </template>
    </a-modal>
  </div>
</template>
<script setup lang="ts">
  import { ref, computed, watch } from 'vue'
  import swiper1 from '@/assets/didaima/panel/swiper0.png'
  import swiper2 from '@/assets/didaima/panel/swiper1.png'
  import swiper3 from '@/assets/didaima/panel/swiper2.png'
  import page1 from '@/assets/didaima/panel/page1.png'
  import page2 from '@/assets/didaima/panel/page2.png'
  const tagvisible = ref(false)
  const emit = defineEmits(['change'])
  const props = defineProps({
    // 选中的当前组件参数
    config: {
      type: Object,
      default: () => {
        return {}
      },
    },
    menus: {
      type: Array,
      required: true,
    },
  })
  const subForm = ref({
    type: 1,
    links: '',
    idx: 0,
  })
  const iconList = ref([
    { type: 'slide', icon: swiper1 },
    { type: 'card', icon: swiper3 },
    { type: 'fade', icon: swiper2 },
  ])
  const pageList = ref([
    { type: 'dot', icon: page1 },
    { type: 'line', icon: page2 },
  ])
  const currentTemp = computed(() => props.config)
  const typeLists = ref([
    { id: 1, name: '自定义' },
    { id: 2, name: '系统功能' },
  ])
  const clickdianType = (val: any) => {
    currentTemp.value.dianType = val.type
  }
  const clickType = (val: any) => {
    currentTemp.value.type = val.type
  }
  watch(
    () => currentTemp,
    (newVal, oldVal) => {
      emit('change', newVal.value)
    },
    { immediate: true, deep: true }
  )
  const addImageBoxs = () => {
    currentTemp.value.imageList.push({ imageUrl: '', text: '' })
  }
  //背景图上传
  const onSuccessBcg = (e: any, fileItem: any) => {
    console.log(fileItem)
    fileItem.imageUrl = e.response.data.path
    console.log(currentTemp.value.imageList)
  }
  const error = (e: any, fileItem: any) => {
    console.log(e, fileItem)
    fileItem.imageUrl = e.response.data.path
  }
  const handleCancelTag = () => {
    tagvisible.value = false
    subForm.value = {
      type: 1,
      links: '',
      idx: 0,
    }
  }
  const chooseLink = (val: any) => {
    subForm.value.idx = val
    tagvisible.value = true
  }
  const userFormTag = ref()
  const handleBeforeOkLink = () => {
    userFormTag.value?.validate().then((error: any) => {
      if (!error) {
        currentTemp.value.imageList[subForm.value.idx].link = subForm.value.links
        tagvisible.value = false
      }
    })
  }
</script>
<style lang="less" scoped>
  :deep(.arco-upload-picture-card) {
    background: var(--color-bg-1);
  }
  :deep(.arco-upload-list-picture) {
    width: 80px;
    height: 80px;
    margin: 0px;
  }
  :deep(.arco-collapse-item-content) {
    padding: 4px 0px;
    background: #fff;
    border: none;
    overflow: visible;
  }
  :deep(.arco-collapse-item-content-box) {
    padding: 0px 10px;
  }
  :deep(.arco-collapse-item-header) {
    border: none;
  }
  :deep(.arco-collapse-item) {
    border: none;
  }
  :deep(.arco-slider-track::before) {
    height: 4px;
  }
  :deep(.arco-slider-bar) {
    height: 4px;
  }
  :deep(.arco-collapse-item .arco-collapse-item-icon-hover) {
    position: absolute;
    top: 50%;
    left: 4px;
  }
  :deep(.arco-collapse-item-header-left) {
    padding-left: 24px;
  }
  .changeBox {
    width: 100%;
    height: 36px;
    display: flex;
    cursor: pointer;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #f2f3f5;
    div:nth-child(2) {
      border-left: 1px solid #f2f3f5;
      border-right: 1px solid #f2f3f5;
    }
    .iconBox {
      width: 33.33%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .activeIcon {
      width: 33.33%;
      height: 100%;
      background-color: #f2f3f5;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .pageBox {
    width: 100%;
    height: 36px;
    display: flex;
    cursor: pointer;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #f2f3f5;
    img {
      width: 30px;
    }
    .iconBox {
      width: 50%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .activeIcon {
      width: 50%;
      height: 100%;
      background-color: #f2f3f5;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .imageBox {
    .addImageBox {
      width: 100%;
      height: 35px;
      text-align: center;
      line-height: 35px;
      background: #f5f5f5;
      color: #333;
      font-size: 14px;
      cursor: pointer;
    }
    .imageBox_item {
      width: 100%;
      height: 110px;
      display: flex;
      background-color: #f5f5f5;
      padding: 15px 20px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      .rightBox {
        height: 100%;
        padding: 4px 0px 4px 10px;
        flex-grow: 1;
        display: flex;
        flex-wrap: wrap;
        align-content: space-between;
        .whiteBg {
          width: 100%;
          height: 35px;
          background-color: #fff;
          border-radius: 4px;
          display: flex;
          align-items: center;
          box-sizing: border-box;
          :deep(.arco-input-wrapper) {
            width: 100% !important;
            background: none !important;
          }
        }

        .texts {
          font-size: 12px;
          color: #1d1929;
        }
      }
    }
  }
  .sliderBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    p {
      width: 50px;
      display: inline-block;
      margin-right: 12px;
    }
  }
  .sliderBox_color {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    position: relative;
    z-index: 10;
    overflow: visible;
    p {
      min-width: 50px;
      display: inline-block;
      margin-right: 12px;
    }
    .setColor {
      position: absolute;
      left: 120px;
      bottom: 30px;
      z-index: 1000000;
    }
  }
  .sliderBox:last-child {
    margin-bottom: 0px;
  }
</style>
